<template>
  <div class="tabControl flex f-a a-c">
    <div v-for='(n,index) in titles' :key="index"
     @click='tabClick(index)'
     :class="{'red':index==currentIndex}"
     >
        <span>{{n}}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'tabControl',
    props:{
        titles:{
            type:Array
        }
    },
    data(){
        return{
            currentIndex:0
        }
    },
    methods:{
        tabClick(index){
            this.currentIndex=index
            
            this.$emit('tabClick',index)
        }
    }
}
</script>

<style scoped>
    .tabControl{
        font-size: 18px;
        line-height: 18px;
        color:rgb(85, 82, 82);
        text-align: center;
        
    }
    .tabControl div{
        
        padding:  5px;
        padding-top:0 ;
    }
    
    .red{
        color: red;
        padding:5px;
        padding-top:0 ;
        border-bottom: 2px solid red;
    }
</style>